<template>
	<div class="pile-message-detail detail-wrap">
		<Head title="报文详情" isBack>
			<template #content>
				<div class="title-box">
					<div class="label">原始报文</div>
					<div class="value">
						<el-tooltip effect="light" placement="bottom-start" :content="data.detailData.originalMsg">
							{{ data.detailData.originalMsg || '--' }}
						</el-tooltip>
					</div>
				</div>

				<div class="row-box">
					<div class="time-box">
						<div class="label">时间</div>
						<div class="value">{{ data.detailData.createTime }}</div>
					</div>
					<div class="time-box">
						<div class="label">类型</div>
						<div class="value">{{ data.detailData.type }}</div>
					</div>
				</div>

				<div class="row-box">
					<div class="time-box" v-for="(item, index) in data.otherDetailData" :key="index">
						<div class="label">{{ item.name }}</div>
						<div class="value" style="white-space: normal;">{{ item.value || '--' }}</div>
						<!-- <div class="value">
							<el-tooltip effect="light" placement="bottom-start" :content="item.value">
								{{ item.value || '--' }}
							</el-tooltip>
						</div> -->
					</div>
				</div>

				<!-- <Detail
          :columns="2"
          :form="data.detailForm"
          :detail="data.detailData"
          align="right"
        ></Detail> -->
			</template>
		</Head>
	</div>
</template>

<script lang="ts" setup>
	import Head from "@/components/head/index.vue";
	import Detail from "@/components/form/detail.vue";
	import { queryDetails } from "@/service/apis/logs";
	import { queryDicByParent } from "@/service/apis/api";

	const route = useRoute();
	const {
		query: {
			id,
			originalMsg,
			createTime,
			type,
			equipmentCode,
			detail,
		},
	} = route;
	const tableRef = ref();

	const data = reactive({
		detailData: {} as any,
		otherDetailData: [] as any,
	});

	if (id) {
		data.detailData.originalMsg = originalMsg;
		data.detailData.createTime = createTime;
		data.detailData.type = type;
		data.detailData.equipmentCode = equipmentCode;
		let newDetail : any = {}, temp : any = [];
		newDetail = typeof detail == "string" ? JSON.parse(detail) : {};
		for (let key in newDetail) {
			if (newDetail[key] == '' || newDetail[key] == 'null' || newDetail[key] == null) {
				temp.push({ name: key, value: '--' })
			} else {
				temp.push({ name: key, value: newDetail[key] })
			}
		}
		data.otherDetailData = temp;

		// queryDetails({ id: id }).then((res : any) => {
		// 	if (res) {
		// 		data.detailData = res;
		// 		let detail : any = {}, temp : any = [];
		// 		detail = res.detail ? JSON.parse(res.detail) : {};
		// 		// console.log('detail', detail);
		// 		for (let key in detail) {
		// 			if (detail[key] == '' || detail[key] == 'null' || detail[key] == null) {
		// 				temp.push({ name: key, value: '--' })
		// 			} else {
		// 				temp.push({ name: key, value: detail[key] })
		// 			}
		// 		}
		// 		data.otherDetailData = temp;
		// 	}
		// });
	}
</script>

<style lang="scss" scoped>
	.pile-message-detail {
		.title-box {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32px 16px;

			.label {
				width: 120px;
				font-size: 12px;
				color: #262626;
				font-weight: 400;
				margin-right: 50px;
				text-align: right;
			}

			.value {
				width: calc(100% - 120px - 42px);
				font-size: 12px;
				color: #555555;
				word-break: keep-all;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.row-box {
			display: flex;
			width: 100%;
			flex-wrap: wrap;

			.time-box {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				color: #555555;
				font-weight: 400;
				width: calc(50% - 80px);
				padding: 0 40px;
				margin-bottom: 12px;

				.label {
					color: #262626;
					text-align: right;
					width: 120px;
				}

				.value {
					width: calc(100% - 120px);
					margin-left: 50px;
					word-break: keep-all;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>